<template>
    <view class="app-container address">
        <zzk-nav title="添加员工"></zzk-nav>
        <view class="address-form">
            <view class="address-line flexrow">
                <view>
                    <text class="label">老板手机号</text>
                </view>
                <view class="value">
                    <up-input v-model="params.mainUserMobile" placeholder="请输入老板手机号" border="none" clearable :customStyle="{ height: '80rpx', fontSize: '28rpx' }"></up-input>
                </view>
            </view>
            <view class="address-line flexrow">
                <view>
                    <text class="label">验证码</text>
                </view>
                <view class="value flexrow">
                    <view class="input">
                        <up-input v-model="params.verifyCode" placeholder="请输入验证码" border="none" clearable :customStyle="{ height: '80rpx', fontSize: '28rpx' }"></up-input>
                    </view>
                    <view class="codebtn">
                        <up-button size="mini" :text="codetext" :plain="true" type="primary" :disabled="iscode" :customStyle="{ margin: 0, height: '56rpx' }" @click="downcount"></up-button>
                    </view>
                </view>
            </view>
            <view class="address-line flexrow">
                <view>
                    <text class="label">姓名</text>
                </view>
                <view class="value">
                    <up-input v-model="params.name" placeholder="请输入员工名称" border="none" clearable :customStyle="{ height: '80rpx', fontSize: '28rpx' }"></up-input>
                </view>
            </view>
            <view class="address-line flexrow">
                <view>
                    <text class="label">员工手机号</text>
                </view>
                <view class="value">
                    <up-input v-model="params.mobile" type="number" placeholder="请输入手机号" border="none" clearable :customStyle="{ height: '80rpx', fontSize: '28rpx' }"></up-input>
                </view>
            </view>
            <view class="address-line flexrow">
                <view>
                    <text class="label">身份证</text>
                </view>
                <view class="value">
                    <up-input v-model="params.certNo" type="idcard" placeholder="请输入身份证" border="none" clearable :customStyle="{ height: '80rpx', fontSize: '28rpx' }"></up-input>
                </view>
            </view>
            <view class="address-line flexrow">
                <view>
                    <text class="label">地址</text>
                </view>
                <view class="value flexrow" @tap="openAddress">
                    <text class="txt" v-if="params.area">{{ params.area }}</text>
                    <text class="txt gray" v-else>请选择所在地址</text>
                    <uni-icons type="right" size="16" color="#999"></uni-icons>
                </view>
            </view>
            <view class="address-line flexrow">
                <view>
                    <text class="label">详细地址</text>
                </view>
                <view class="value">
                    <up-input v-model="params.address" placeholder="请输入详细地址" border="none" clearable :customStyle="{ height: '80rpx', fontSize: '28rpx' }"></up-input>
                </view>
            </view>
        </view>
        <zzk-bottom>
            <view class="address-bottom flexrow">
                <up-button type="primary" text="保存" :loading="loading" @click="onSubmit"></up-button>
            </view>
        </zzk-bottom>
    </view>
</template>

<script setup>
import { ref } from 'vue'
import { onUnload } from '@dcloudio/uni-app'
import { showToast, backpage } from '@/utils/util'
import { staffRegister } from '@/api/staff.js'
import { sendVerifyCode } from '@/api/verify.js'
import WxValidate from '@/utils/WxValidate.js'

const params = ref({
    mainUserMobile: '',
    verifyCode: '',
    name: '',
    mobile: '',
    certNo: '',
    area: '',
    address: '',
})
const loading = ref(false)

const codetext = ref('获取验证码')
const iscode = ref(false)
const timer = ref(null)
const time = ref(60)

onUnload(() => {
    if (timer.value) {
        clearInterval(timer.value)
    }
})

const downcount = () => {
    const rules = {
        mainUserMobile: { required: true, tel: true }
    }
    const messages = {
        mainUserMobile: { required: '请输入老板手机号', tel: '老板手机号格式不正确' }
    }
    const wxv = new WxValidate(rules, messages)
    if (!wxv.checkForm(params.value)) {
        const error = wxv.errorList[0]
        showToast(error.msg)
        return false
    }
    
    iscode.value = true
    time.value -= 1
    codetext.value = `剩余${time.value}S`
    
    sendCode()
    
    timer.value = setInterval(() => {
        if (time.value > 0) {
            time.value -= 1
            codetext.value = `剩余${time.value}S`
        } else {
            iscode.value = false
            time.value = 60
            codetext.value = '获取验证码'
            clearInterval(timer.value)
        }
    }, 1000)
}

const sendCode = () => {
    const data = {
        phone: params.value.mainUserMobile
    }
    sendVerifyCode(data).then(res => {
        showToast('发送成功')
    })
}

const openAddress = () => {
    uni.chooseLocation({
        success: res => {
            params.value.area = res.address
        }
    })
}

const onSubmit = () => {
    const rules = {
        mainUserMobile: { required: true, tel: true },
        verifyCode: { required: true },
        name: { required: true },
        mobile: { required: true, tel: true },
        certNo: { required: true, idcard: true },
        area: { required: true },
        address: { required: true },
    }
    const messages = {
        mainUserMobile: { required: '请输入老板手机号', tel: '手机号格式不正确' },
        verifyCode: { required: '请输入老板验证码' },
        name: { required: '请输入员工姓名' },
        mobile: { required: '请输入员工手机号', tel: '手机号格式不正确' },
        certNo: { required: '请输入员工身份证' },
        area: { required: '请选择区域' },
        address: { required: '请输入详细地址' },
    }
    const wxv = new WxValidate(rules, messages)
    if (!wxv.checkForm(params.value)) {
        const error = wxv.errorList[0]
        showToast(error.msg)
        return false
    }
    
    const data = {
        name: params.value.name,
        mobile: params.value.mobile,
        certNo: params.value.certNo,
        area: params.value.area,
        address: params.value.address,
    }
    const query = `?mainUserMobile=${params.value.mainUserMobile}&verifyCode=${params.value.verifyCode}`
    
    loading.value = true
    staffRegister(data, query).then(res => {
        loading.value = false
        showToast('添加成功', () => {
            uni.reLaunch({
                url: '/pages/init/start'
            })
        })
    }).catch(e => {
        loading.value = false
    })
}
</script>

<style lang="scss">
.address {
    &-form {
        margin-top: 20rpx;
        background-color: #fff;
        padding: 0 $zzk-margin;
    }
    &-line {
        padding: 20rpx 0;
        border-bottom: #f5f5f5 1rpx solid;
        .label {
            width: 160rpx;
            line-height: 80rpx;
            font-size: 28rpx;
        }
        .value {
            align-items: center;
            flex: 1;
        }
        .txt {
            font-size: 28rpx;
            color: #333;
            line-height: 80rpx;
            flex: 1;
            &.gray {
                color: #c0c4cc;
            }
        }
        .codebtn {
            width: 144rpx;
        }
        .input {
            flex: 1;
        }
    }
    &-bottom {
        flex: 1;
        padding: 0 $zzk-margin;
        align-items: center;
    }
}
</style>